<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<html>
<head>
   <script type="text/javascript">
       function f1() {
        //console.log($('.chen:checked').attr('id'))
        //获得全部的被选中的复选框元素节点对象
       //遍历全部的被选中复选框
       //如果有选中就获得其value值
       var s = "";
       for(var i=0;i<$('.chen:checked').length;i++){
           var x = $('.chen:checked:eq('+i+')').val()
           s += x+','
           console.log(x)
       }
       //截取片段，将属性值末尾的逗号去掉
       s = s.substr(0,s.length-1)
       console.log(s)
       //获得全部被选中的属性值

       console.log($('select').val())
       }
       //value值匹配则被勾选
       function f2() {
           $('.chen').val([1,2,4])
           $('select').val(['B'])
           $('.sx').val(['b'])
       }
       function f3() {
           $('.chen').attr('checked',true)
       }
       function f4() {
           $('.chen').attr('checked',false)
       }
       //1.6版本前用attr，1.6后用prop或者is
       function f5() {
           console.log($('.chen:eq(0)').prop('checked'))
           for(var i=0; i<$('.chen').length;i++){
               var flag = $('.chen:eq('+i+')').prop('checked');
               $('.chen:eq('+i+')').prop('checked',!flag)

           }
       }
   </script>
</head>
<body>
    <h2>表单域选择器</h2>
    爱好：
    <input id="001" type="checkbox" class="chen" name="hobby[]" value="1">篮球
    <input id="002" type="checkbox" class="chen" name="hobby[]" value="2">足球
    <input id="003" type="checkbox" class="chen" name="hobby[]" value="3">排球
    <input id="004" type="checkbox" class="chen" name="hobby[]" value="4">棒球
    <hr /></hr />
    性别：
    <input type="radio" class="sx" name="sex" value="a">男性
    <input type="radio" class="sx" name="sex" value="b">女性
    <input type="radio" class="sx" name="sex" value="c">保密
    <hr /></hr />

    城市
    <select>
        <option value="A">北京</option>
        <option value="B">上海</option>
        <option value="C">广州</option>
        <option value="D">厦门</option>
    </select>
    <input type="button" value="触发" onclick="f1()">
    <input type="button" value="设置默认勾选项" onclick="f2()">
    <input type="button" value="复选框全选" onclick="f3()">
    <input type="button" value="复选框全部取消" onclick="f4()">
    <input type="button" value="复选框反选选" onclick="f5()">
</body>
</html>
